<template>
  <Modal
    v-model="form.visible"
    :width="1000"
    :mask-closable="false"
    :loading="loading"
    :title="'查看费用详细'">
    <Row class="mt30">
      <Col span="16" offset="4">
        <Form ref="form" :model="form.data" :label-width="100">
          <FormItem prop="costType" label="费用类型">
            <Select v-model="form.data.costType" style="width: 100%" placeholder="请选择费用用途" disabled>
              <Option
                v-for="item in costTypeCodeList"
                :key="item.code"
                :value="'' + item.code">{{ item.name }}</Option>
            </Select>
          </FormItem>
          <FormItem prop="costUsed" label="费用用途">
            {{form.data.costUsed}}
          </FormItem>
          <FormItem prop="costNum" label="数量">
            {{form.data.costNum}}
          </FormItem>
          <FormItem prop="costCash" label="费用">
            {{form.data.costCash}}
          </FormItem>
          <FormItem prop="costTime" label="费用产生时间">
            {{form.data.costTime | formatDate('YYYY-MM-DD HH:mm:ss')}}
          </FormItem>
          <FormItem prop="remark" label="费用说明">
            {{form.data.remark}}
          </FormItem>
        </Form>
      </Col>
    </Row>
  </Modal>
</template>

<script>
  import { mapGetters } from 'vuex'

  export default {
    name: 'update-modal',
    props: [
      'form'
    ],
    data () {
      return {
        loading: true
      }
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo',
        costTypeCodeList: 'costTypeCodeList'
      })
    },
    mounted () {
      this.$store.dispatch('getCode', 'cost_type')
    }
  }
</script>
